<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>短链管理首页</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/ico">
    <meta http-equiv="description" content="bluewind-shorturl在线短链生成"/>
    <meta http-equiv="keywords" content="蓝风软件,短链生成,在线短链生成,长链转短链"/>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/js/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/js/bootstrap-table/extensions/page-jump/bootstrap-table-pagejump.min.css}" rel="stylesheet">
    <link th:href="@{/js/layer/theme/layer.min.css}" rel="stylesheet">
    <!--日期选择插件-->
    <link rel="stylesheet" th:href="@{/js/bootstrap-datepicker/bootstrap-datepicker3.min.css}">

    <style>
        .copy-btn {
            text-decoration: underline;
            color: #3ACCBE;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <!-- 自定义表单开始 -->
                    <form id="formId" role="form" class="form-inline">
                        <div class="form-group m-r-10">
                            <label class="control-label">短链接：</label>
                            <input type="text" value="" name="surl" id="surl" placeholder="请输入短链接" class="form-control"/>
                        </div>

                        <div class="form-group m-r-10">
                            <label>创建时间：</label>
                            <input type="text" class="form-control js-datepicker" data-date-format="yyyy-mm-dd" name="created_at" id="created_at" placeholder="请选择创建时间">
                        </div>

                        <div class="form-group m-r-10">
                            <label>状态：</label>
                            <select class="form-control selectpicker" id="status" name="status">
                                <option value="">全部</option>
                                <option value="0" selected>启用</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <!-- 查询按钮 -->
                            <a class="btn btn-primary m-r-5" onclick="reloadTable()">
                                <span class="mdi mdi-magnify" aria-hidden="true"></span>搜索
                            </a>
                            <!-- 重置表单按钮 -->
                            <a class="btn btn-warning" onclick="$('#formId')[0].reset()">
                                <span class="mdi mdi-loop" aria-hidden="true"></span>重置
                            </a>
                        </div>
                    </form>
                </div>

                <div class="card-body">

                    <div id="toolbar" class="toolbar-btn-action">
                        <button id="btn_add" type="button" class="btn btn-primary m-r-5" onclick="add()">
                            <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                        </button>
                        <button id="btn_enable" type="button" class="btn btn-success m-r-5" onclick="enable()">
                            <span class="mdi mdi-check" aria-hidden="true"></span>启用
                        </button>
                        <button id="btn_disable" type="button" class="btn btn-warning m-r-5" onclick="disable()">
                            <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-danger" onclick="batchDel()">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                        </button>
                    </div>
                    <table id="tableId"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<!--消息提醒插件-->
<script type="text/javascript" th:src="@{/js/coco-message/coco-message.js}"></script>
<!--复制到粘贴板插件-->
<script type="text/javascript" th:src="@{/js/clipboard.min.js}"></script>
<!--表格插件-->
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/extensions/page-jump/bootstrap-table-pagejump.min.js}"></script>
<!--弹窗插件-->
<script type="text/javascript" th:src="@{/js/layer/layer.min.js}"></script>
<!--日期选择插件-->
<script type="text/javascript" th:src="@{/js/bootstrap-datepicker/bootstrap-datepicker.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<!--公共组件-->
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
<script type="text/javascript" th:src="@{/js/public.js}"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';

    $(document).ready(function () {

        var options = {
            domId: "tableId",
            toolbar: "toolbar",
            url: AjaxUtil.ctx + "tenant/url/list",
            uniqueId: "id",
            // 是否启用排序
            sortable: true,
            // 排序方式
            sortOrder: "desc",
            // 默认排序列
            sortName: "created_at",
            queryParams: queryParams,
            //数据列
            columns: [{
                field: "checkbox",
                checkbox: true
            }, {
                title: "ID",
                field: "id",
                sortable: true
            }, {
                title: "短链",
                field: "surl",
                formatter: function(value, row, index) {
                    return '<span title="点击复制" data-toggle="tooltip" class="copy-btn">' + value + '</span>';
                },
                events: {
                    'click .copy-btn': function (event, value, row, index) {
                        copy(event, value);
                    }
                }
            }, {
                title: "原始链接",
                field: "lurl",
                sortable: true
            },
            {
                title: "访问次数",
                field: "views",
                sortable: true
            },
            {
                title: "过期时间",
                field: "expire_time",
                sortable: true,
                formatter: function (value, row, index) {
                    return value.substring(0, 4) + "-" + value.substring(4, 6) + "-" + value.substring(6, 8) + " " +value.substring(8, 10) + ":" + value.substring(10, 12) + ":" + value.substring(12, 14);
                }
            },
            {
                title: "状态",
                field: "status",
                formatter: function (value, row, index) {
                    if (value === '0') {
                        return '<span class="label label-info">启用</span>';
                    } else {
                        return '<span class="label label-danger">禁用</span>';
                    }
                }
            },
            {
                title: "创建时间",
                field: "created_at",
                sortable: true
            }, {
                title: "操作",
                field: "empty",
                align: "center",
                halign: "center",
                width: 180,
                formatter: function (value, row, index) {
                    var operateHtml = '<a class="btn btn-primary btn-xs m-r-5" type="button" onclick="edit(\'' + row.id + '\')"> <i class="mdi mdi-pencil"></i>修改</a>'
                     + '<a class="btn btn-danger btn-xs" type="button" onclick="del(\'' + row.id + '\')"><i class="mdi mdi-window-close"></i>删除</a>';
                    return operateHtml;
                }
            }]
        }

        // 初始化表格
        initTable(options);
    });


    // 分页查询参数，是以键值对的形式设置的
    function queryParams(params) {
        return {
            surl: $("#surl").val(), // 请求时向服务端传递的参数
            createdAt: $("#created_at").val(), // 请求时向服务端传递的参数
            status: $("#status").val(),
            pageSize: params.pageSize, // 每页显示数量
            pageNumber: params.pageNumber, // SQL语句偏移量
            sortName: params.sortName,
            sortOrder: params.sortOrder
        }
    }


    // 查询操作
    function reloadTable() {
        $("#tableId").bootstrapTable('refresh');
    }

    function add() {
        LayerUtil.openPage({
            title: '新增短链',
            content: AjaxUtil.ctx + "tenant/url/addPage",
            end: function (index) {
                reloadTable();
            }
        });
    }


    function enable() {
        var idlist = $('#tableId').bootstrapTable('getAllSelections');
        if (idlist == false) {
            Message.warning('请至少选择一条数据', 1000);
            return;
        }
        var idlistStr = "";
        for (var i = 0; i < idlist.length; i++) {
            idlistStr = idlistStr + idlist[i].id + ","
        }
        idlistStr = idlistStr.substring(0, idlistStr.length - 1);

        layer.confirm('确定要启用删除吗?', {icon: 'doubt', title: '提示'}, function (index) {
            AjaxUtil.post({
                url: AjaxUtil.ctx + "tenant/url/enable",
                data: {
                    'idlistStr' : idlistStr
                },
                success: function (res) {
                    layer.close(index);
                    if (res.code === 200) {
                        Message.success(1000, res.msg, function () {
                            reloadTable();
                        });
                    } else {
                        Message.error(res.msg, 1000);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error(error, 1000);
                }
            });
        });
    }

    function disable() {
        var idlist = $('#tableId').bootstrapTable('getAllSelections');
        if (idlist == false) {
            Message.warning('请至少选择一条数据', 1000);
            return;
        }
        var idlistStr = "";
        for (var i = 0; i < idlist.length; i++) {
            idlistStr = idlistStr + idlist[i].id + ","
        }
        idlistStr = idlistStr.substring(0, idlistStr.length - 1);

        layer.confirm('确定要批量禁用吗?', {icon: 'doubt', title: '提示'}, function (index) {
            AjaxUtil.post({
                url: AjaxUtil.ctx + "tenant/url/disable",
                data: {
                    'idlistStr' : idlistStr
                },
                success: function (res) {
                    layer.close(index);
                    if (res.code === 200) {
                        Message.success(1000, res.msg, function () {
                            reloadTable();
                        });
                    } else {
                        Message.error(res.msg, 1000);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error(error, 1000);
                }
            });
        });
    }

    function batchDel() {
        var idlist = $('#tableId').bootstrapTable('getAllSelections');
        if (idlist == false) {
            Message.warning('请至少选择一条数据', 1000);
            return;
        }
        var idlistStr = "";
        for (var i = 0; i < idlist.length; i++) {
            idlistStr = idlistStr + idlist[i].id + ","
        }
        idlistStr = idlistStr.substring(0, idlistStr.length - 1);

        layer.confirm('确定要批量删除吗?', {icon: 'doubt', title: '提示'}, function (index) {
            AjaxUtil.post({
                url: AjaxUtil.ctx + "tenant/url/batchDel",
                data: {
                    'idlistStr' : idlistStr
                },
                success: function (res) {
                    layer.close(index);
                    if (res.code === 200) {
                        Message.success(1000, res.msg, function () {
                            reloadTable();
                        });
                    } else {
                        Message.error(res.msg, 1000);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error(error, 1000);
                }
            });
        });
    }

    function edit(id) {
        LayerUtil.openPage({
            title: '修改短链',
            content: AjaxUtil.ctx + "tenant/url/editPage/" + id,
            end: function (index) {
                reloadTable();
            }
        });
    }

    function del(id) {
        layer.confirm('确定要删除吗?', {icon: 'doubt', title: '提示'}, function (index) {
            AjaxUtil.get({
                url: AjaxUtil.ctx + "tenant/url/del/" + id,
                success: function (res) {
                    layer.close(index);
                    if (res.code === 200) {
                        Message.success(1000, res.msg, function () {
                            reloadTable();
                        });
                    } else {
                        Message.error(res.msg, 1000);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error(error, 1000);
                }
            });
        });
    }

    function copy(event, value) {
        console.log(value);
        let inetAddress = [[${inetAddress}]];
        handleClipboard(inetAddress + value, event)
    }

    function handleClipboard(text, event) {
        const clipboard = new ClipboardJS(event.target, {
            text: () => text
        });
        clipboard.on('success', () => {
            Message.success(1000, '已复制到粘贴板');
            clipboard.destroy();
        });
        clipboard.on('error', () => {
            Message.error("Copy error！", 1000);
            clipboard.destroy();
        });
        clipboard.onClick(event);
    }
</script>
</body>
</html>